<template>
  <div id="detailslist"> 


          <el-table :data="datalist" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
          :row-class-name="tableRowClassName"  :border="true">

                <el-table-column label="日期"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="数量"  align='center' >                   
                    <template slot-scope="scope">                       
                        <span>{{ scope.row.num }}</span><span @click="mtk_but(scope.row)"><i class="el-icon-view el-icon--right"></i></span>
                    </template>
                </el-table-column> 
            </el-table>  


             <el-dialog title='详情' :visible.sync="mtk_table"  width="800px">
            <div style="width:100%;"> 
  
             <el-table :data="mtk_table_form.datalist" style="width: 100%" height="500px" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">
                
                  <el-table-column label="日期"  align='center' width="200px" >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="运营中心"  align='center' >                   
                    <template slot-scope="scope">                       
                        <span v-if="scope.row.operate_center">{{ scope.row.operate_center.name}}</span>
                         <span v-else>暂无</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="0号线"  align='center' width="200px">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.leader.nickname">姓名：{{ scope.row.leader.nickname }}</span>
                        <span>手机号：{{ scope.row.leader.telphone }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="抢拍情况"  align='center' width="100px">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.is_buy == 0">未抢拍</span>
                        <span v-if="scope.row.is_buy == 1">已抢拍</span>
                    </template>
                </el-table-column>

            </el-table> 

             <div style="margin-top:20px;text-align: center;">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="10"  
                    layout="prev, pager, next, jumper"
                    :total="count">
                </el-pagination>
            </div>

            </div> 
        </el-dialog>


   </div>
</template>

<script>

export default {
   name: 'detailslist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        page:1,
        count:0,
        mtk_table:false,
        mtk_table_form:{
            datalist:[],
            time:''
        }
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 200
      
  },
  mounted (){
    
  },
  methods: {
       mtk_but(row){
         this.mtk_table_form.datalist  = []
         this.page = 1
         this.mtk_table_form.time = row.date
         this.mtk_fun()
         this.mtk_table = true
      },
       mtk_fun(){
        this.post("/whole/newUsersDetail", {
              page:this.page,
              onetime:this.mtk_table_form.time,
	         }).then(res => {
            this.count = res.result.count
            this.mtk_table_form.datalist = res.result.list
            console.log(res)
          })
      }, 
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page = val
            this.mtk_fun()
            console.log(`当前页: ${val}`);
        }
  }
}
</script>


<style scoped>

</style>